<template>
    <div class="ranking">
        <div class="title">{{ $t('my.排行榜') }}</div>
        <div class="tabs">
            <div class="item" :class="active == 'live' ? 'active' : ''" @click="changeType('live')">
                {{ $t('live.直播榜') }}
            </div>
            <div class="item" :class="active == 'video' ? 'active' : ''" @click="changeType('video')">
                {{ $t('live.视频榜') }}
            </div>
        </div>

        <div class="el_tabs">
            <el-tabs v-model="type" @tab-click="changeTabs">
                <el-tab-pane :label="$t('live.点赞榜')" name="1"></el-tab-pane>
                <el-tab-pane :label="$t('live.点黑榜')" name="2"></el-tab-pane>
            </el-tabs>
        </div>
        <div class="content">
            <div class="glory">
                <div class="item two">
                    <div class="avatar_view">
                        <div class="avatar" @click="handerRouter(two)">
                            <img :src="two.user_info.avatar" alt="" class="avatar_img">
                            <img src="@/assets/image/l2.png" alt="" class="avatar_icon">
                        </div>
                    </div>
                    <div class="user_name">{{ two.user_info.nickname }}</div>
                    <div class="number" v-if="type == 1">{{ $t('live.点赞') }}:{{ two.support_count }}</div>
                    <div class="number" v-else>{{ $t('live.点黑') }}:{{ two.black_count }}</div>
                </div>

                <div class="item one">
                    <div class="avatar_view">
                        <div class="avatar" @click="handerRouter(one)">
                            <img :src="one.user_info.avatar" alt="" class="avatar_img">
                            <img src="@/assets/image/l1.png" alt="" class="avatar_icon">
                        </div>
                    </div>
                    <div class="user_name">{{ one.user_info.nickname }}</div>
                    <div class="number" v-if="type == 1">{{ $t('live.点赞') }}:{{ one.support_count }}</div>
                    <div class="number" v-else>{{ $t('live.点黑') }}:{{ one.black_count }}</div>
                </div>

                <div class="item three">
                    <div class="avatar_view">
                        <div class="avatar" @click="handerRouter(three)">
                            <img :src="three.user_info.avatar" alt="" class="avatar_img">
                            <img src="@/assets/image/l3.png" alt="" class="avatar_icon">
                        </div>
                    </div>
                    <div class="user_name">{{ three.user_info.nickname }}</div>
                    <div class="number" v-if="type == 1">{{ $t('live.点赞') }}:{{ three.support_count }}</div>
                    <div class="number" v-else>{{ $t('live.点黑') }}:{{ three.black_count }}</div>
                </div>
            </div>

            <div class="table">
                <el-table :data="list" cell-class-name="table_cell">
                    <el-table-column :label="$t('live.排名')" align="center" width="120">
                        <template slot-scope="scope">
                            <span>{{ rankOffset + scope.$index + 4 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="user_id" label="信息" align="center">
                        <template slot-scope="{row}">
                            <div class="cell_view">
                                <img :src="row.user_info.avatar" alt="" class="avatar">
                                <span>{{ row.user_info.nickname }}</span>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column prop="user_id" label="ID" align="center">
                        <template slot-scope="{row}">
                            <div>ID:{{ row.user_id }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="support_count" :label="$t('live.点赞')" align="center" v-if="type == 1">
                        <template slot-scope="{row}">
                            <div>{{ $t('live.点赞') }}:{{ row.support_count }}</div>
                        </template>
                    </el-table-column>

                    <el-table-column prop="black_count" :label="$t('live.点黑')" align="center" v-else>
                        <template slot-scope="{row}">
                            <div>{{ $t('live.点黑') }}:{{ row.black_count }}</div>
                        </template>
                    </el-table-column>

                    <el-table-column fixed="right" align="center" width="100" :label="$t('table.操作')">
                        <template slot-scope="{row}">
                            <div class="oper_view">
                                <el-button round @click="handerRouter(row)">
                                    {{ $t('live.私信') }}
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page_view">
                <el-pagination background layout="prev, pager, next" :current-page="page" :total="total"
                    @current-change="change" />
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
const init = {
    id: "",
    support_count: "",
    black_count: "",
    user_info: {
        avatar: "",
        nickname: "",
    }
};
export default {
    data() {
        return {
            active: 'live',
            type: '1',

            one: init,
            two: init,
            three: init,

            list: [],
            page: 1,
            total: 0
        }
    },
    computed: {
        ...mapState({
            allContacts: state => state.allContacts
        }),
        // 排名偏移量：第一页不偏移，之后每页偏移10（第一页接口取13条并在前端截去3条，这里以每页10条计算偏移）
        rankOffset() {
            return this.page > 1 ? (this.page - 1) * 10 : 0;
        }
    },
    created() {
        this.getList()
    },
    methods: {
        changeType(value) {
            if (this.active == value) return;
            this.active = value;
            this.getList();
        },
        changeTabs() {
            this.getList();
        },
        change(value) {
            this.page = value;
            this.active == 'live' ? this.live_rank() : this.video_rank();
        },

        async live_rank() {
            let page_size = this.page == 1 ? 13 : 10;
            let {
                list: res
            } = await this.$api.clutterApi.live_rank({
                type: this.type,
                page: this.page,
                page_size: page_size
            });

            this.total = res.total;

            if (this.page == 1) {
                let data = res.data;
                this.one = data[0] || this.one;
                this.two = data[1] || this.two;
                this.three = data[2] || this.three;
                this.list = data.slice(3);
            } else {
                this.list = res.data;
            }
        },
        async video_rank() {
            let page_size = this.page == 1 ? 13 : 10;
            let {
                list: res
            } = await this.$api.clutterApi.video_rank({
                type: this.type,
                page: this.page,
                page_size: page_size
            });

            if (this.page == 1) {
                let data = res.data;
                this.one = data[0] || this.one;
                this.two = data[1] || this.two;
                this.three = data[2] || this.three;
                this.list = data.slice(3);
            } else {
                this.list = res.data;
            }
        },
        getList() {
            this.page = 1;
            this.one = this.two = this.three = init;
            this.list = [];
            this.active == 'live' ? this.live_rank() : this.video_rank();
        },

        async handerRouter(item) {
            const user_id = item.user_id;

            const { user } = await this.$api.chatApi.searchUser({
                user_id
            });

            const im_id = user.im_user_id;
            const contact = this.allContacts.find(item => item.user_id == im_id);
            this.$store.commit('changeChatUser', contact);
            setTimeout(() => {
                this.$router.replace({
                    name: 'message'
                })
            }, 100)
        }
    }
}
</script>

<style scoped lang="scss">
.ranking {
    min-width: 100%;
    min-height: 100%;
    border-radius: 10px 10px 0 0;
    padding: 24px;
    box-sizing: border-box;
    background: #FCFCFE;

    .title {
        font-weight: bold;
        font-size: 20px;
        color: #333333;
        padding-bottom: 16px;
        display: flex;
        justify-content: space-between;
    }


    .tabs {
        display: flex;

        .item {
            height: 45px;
            line-height: 45px;
            text-align: center;
            color: #FFFFFF;
            font-weight: bold;
            font-size: 18px;
            margin-right: 36px;
            padding: 0 10px;
            box-sizing: border-box;
            background: rgba(34, 115, 255, 0.5);
            border-radius: 8px 8px 8px 8px;
            cursor: pointer;

            &.active {
                background: #2273FF;
            }
        }
    }

    .el_tabs {
        padding: 16px 0;

        :deep(.el-tabs__item) {
            font-size: 18px;
        }
    }

    .content {
        border-radius: 12px;
        overflow: hidden;
        padding-bottom: 120px;
        background: linear-gradient(180deg, #ACCDF9 0%, rgba(172, 205, 249, 0) 100%);

        .glory {
            height: 300px;
            display: flex;
            justify-content: center;

            .item {
                width: 148px;
                height: 128px;
                background: #FFFFFF;
                border-radius: 16px;
                border: 1px solid #EAB46D;
                margin-top: 118px;
                padding-top: 64px;
                box-sizing: border-box;
                position: relative;

                .avatar_view {
                    position: absolute;
                    left: 50%;
                    top: -30px;
                    transform: translateX(-50%);

                    .avatar {
                        position: relative;

                        &_img {
                            width: 70px;
                            height: 70px;
                            border-radius: 50%;
                            border: 3px solid #F7A12D;
                        }

                        &_icon {
                            width: 37px;
                            height: 27px;
                            position: absolute;
                            right: -4px;
                            bottom: -4px;
                            z-index: 2;
                        }
                    }
                }

                .user_name {
                    text-align: center;
                    font-size: 16px;
                    color: #000000;
                    padding: 0 5px 5px;
                    box-sizing: border-box;

                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                .number {
                    text-align: center;
                    font-size: 14px;
                    color: #000000;
                    padding: 0 5px;
                    box-sizing: border-box;

                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                &.one {
                    margin: 84px 92px 0;
                }
            }
        }

        .table {
            border-radius: 12px;
            overflow: hidden;

            .table_cell {
                .cell_view {
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .avatar {
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        margin-right: 8px;
                    }

                    span {
                        font-size: 14px;
                        color: #000000;
                    }
                }
            }
        }
    }
}
</style>
